<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-fluid layadmin-cmdlist-fluid">
            <div class="layui-row layui-col-space30">
                <% if(empty) { %>
                <% for(s in stocks) { %>
                <div class="layui-col-md2 layui-col-sm4">
                    <div class="cmdlist-container">
                        <a href="javascript:;"> <img src="${s.product.productPic}">
                        </a>
                        <div class="cmdlist-text">
                            <p class="info">${s.product.productName}</p>
                            <div class="price">
                                <b>库存： ${s.productAmount}件 </b>
                            </div>
                            <div class="price" product="${s.product.id}" data="${s.id}" name="${s.product.productName}">
                                <button class="layui-btn layui-btn-radius layui-btn-fluid layui-btn-sm layui-btn-normal stockRecord"
                                        style="margin-top: 10px;">库存明细
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <% } %>
                <% } %>
                <% if(!empty) { %>
                <div class="layui-container">
                    <div class="layui-row">
                        <div class="layui-col-md12" style="text-align: center;">
                            暂无数据
                        </div>
                    </div>
                </div>
                <% } %>
            </div>
        </div>
    </div>
</div>
<link rel="stylesheet" href="${ctxPath}/assets/css/template.css"/>
<script>
    layui.use(['form', 'table', 'util', 'admin', 'element'], function () {
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        var util = layui.util;
        var admin = layui.admin;
        var element = layui.element;
        $('.stockRecord').click(
            function () {
                var stockId = $(this).parent()
                    .attr("data");
                var name = $(this).parent().attr(
                    "name");
                showDetailModel(stockId, name);
            })

        // 显示表单弹窗
        var showDetailModel = function (data, name) {
            layer.open({
                type: 1,
                area: '50%',
                offset: '20%',
                title: name + "--库存记录",
                maxmin: true,
                btn: ['关闭'],
                content: '<div class="layui-card"><div class="layui-card-body"><table class="layui-hide" id="templateTable"></table></div></div>'
                + '<script type="text/html" id="typeTpl">'
                + '{{# if (d.type=== 1) { }}  '
                + '<span style="color: red;">+  {{d.amount}}</span> '
                + '{{# } else if(d.type=== 2 ||d.type=== 3 || d.type=== 4) { }}  '
                + '<span style="color: green;">-  {{d.amount}}</span>    '
                + ' {{# } }} <\/script>'
                + ' <script type="text/html" id="recordTypeTpl">'
                + '{{# if (d.type=== 1) { }}  '
                + '	<span style="color: red;">入库</span>   '
                + '{{# } else if(d.type=== 2 ) { }}  '
                + '	<span style="color: green;">出库</span>    '
                + '{{# } else if(d.type=== 3 ) { }}  '
                + '<span style="color: green;">售出</span>    '
                + '{{# } else if(d.type=== 4 ) { }}  '
                + '<span style="color: green;">领用</span>    '
                + ' {{# } }} <\/script>',

                success: function (index, layero) {

                    table.render({
                        elem: '#templateTable'

                        , url: "system/service/stockRecordDetail"

                        , where: {type: data}
                        , page: true //开启分页
                        , cols: [[
                            {type: 'numbers', title: '序号'},
                            {field: 'shopName', sort: false, title: '门店名称'},
                            {field: 'amount', sort: false, title: '数量(件)', templet: '#typeTpl'},
                            {field: 'type', sort: false, title: '类型', templet: '#recordTypeTpl'},
                            {
                                sort: true, templet: function (d) {
                                    return util.toDateString(d.createTime);
                                }, title: '创建时间'
                            },
                        ]]
                    });

                },
            });
        };
    });
</script>